<template>
  <div class="login">
    <div class="login-container">
      <!-- 登录表单 -->
      <el-card class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83">
        <div class="text-center relative">
          <h2>开发临时登录入口</h2>
        </div>
        <el-form ref="loginFormRef" :model="loginData" :rules="loginRules" class="login-form">
          <el-form-item prop="username">
            <div class="p-2">
              <dk-icon icon="User"></dk-icon>
            </div>
            <el-input
              ref="username"
              v-model="loginData.username"
              class="flex-1"
              size="large"
              placeholder="login.username"
              name="username"
            />
          </el-form-item>

          <el-tooltip :disabled="isCapslock === false" content="Caps lock is On" placement="right">
            <el-form-item prop="password">
              <span class="p-2">
                <dk-icon icon="Lock"></dk-icon>
              </span>
              <el-input
                v-model="loginData.password"
                class="flex-1"
                placeholder="login.password"
                :type="passwordVisible === false ? 'password' : 'input'"
                size="large"
                name="password"
                @keyup="checkCapslock"
                @keyup.enter="handleLogin"
              />
              <span class="mr-2" @click="passwordVisible = !passwordVisible">
                <dk-icon :icon="!passwordVisible ? 'Hide' : 'View'"></dk-icon>
              </span>
            </el-form-item>
          </el-tooltip>

          <el-button :loading="loading" type="primary" class="w-full" @click.prevent="handleLogin"> 登录 </el-button>
        </el-form>
      </el-card>

      <!-- ICP备案 -->
      <div class="absolute bottom-1 text-[10px] text-center">
        <p>Copyright © 2021 - 2023 youlai.tech All Rights Reserved. 多客怪兽 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// API依赖
import { useUserStore } from '@/stores/user'
import router from '@/router'
import { type LocationQuery, type LocationQueryValue, useRoute } from 'vue-router'
const loading = ref(false) // 按钮loading
const isCapslock = ref(false) // 是否大写锁定
const passwordVisible = ref(false) // 密码是否可见

const userStore = useUserStore()

const loginData = ref({
  username: 'admin',
  password: 'lhblm520'
})

const loginRules = computed(() => {
  const prefix = '请输入'
  return {
    username: [
      {
        required: true,
        trigger: 'blur',
        message: `${prefix}login.username}`
      }
    ],
    password: [
      {
        required: true,
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          if (value.length < 6) {
            callback(new Error('The password can not be less than 6 digits'))
          } else {
            callback()
          }
        },
        message: `${prefix}login.password}`
      }
    ]
  }
})

/**
 * 检查输入大小写状态
 */
function checkCapslock(e: any) {
  const { key } = e
  isCapslock.value = key && key.length === 1 && key >= 'A' && key <= 'Z'
}
/**
 * 登录
 */
const route = useRoute()
function handleLogin() {
  userStore
    .login(loginData.value)
    .then((res) => {
      console.log('res', res)
      ElMessage({
        message: '登录成功',
        type: 'success'
      })
      const query: LocationQuery = route.query

      const redirect = (query.redirect as LocationQueryValue) ?? '/'
      const otherQueryParams = Object.keys(query).reduce((acc: any, cur: string) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})

      router.push({ path: redirect, query: otherQueryParams })
      console.log('111', { path: redirect, query: otherQueryParams })
    })
    .catch((res) => {
      console.log('err', res)
      ElMessage({
        message: '登录失败，' + res.msg,
        type: 'error'
      })
    })
}

const test = () => {
  router.push('/404')
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.login-container {
  @apply w-full h-full flex-center;
  overflow-y: auto;
  background: #fff;

  .login-form {
    padding: 30px 10px;

    .captcha {
      position: absolute;
      top: 0;
      right: 0;

      .image-slot {
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: var(--el-text-color-secondary);
        background: var(--el-fill-color-light);
      }
    }
  }
}

.el-form-item {
  background: var(--el-input-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
}

:deep(.el-input) {
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    &.is-focus,
    &:hover {
      box-shadow: none !important;
    }

    input:-webkit-autofill {
      transition: background-color 1000s ease-in-out 0s; /* 通过延时渲染背景色变相去除背景颜色 */
    }
  }
}
</style>
